const btn = document.querySelectorAll('.btn')
btn.forEach(button => {
    button.addEventListener('click', (event) => {
        const circle = document.createElement('span')
        circle.classList.add('circle')
        circle.style.top = event.pageY - event.target.offsetTop + 'px'
        circle.style.left = event.pageX - event.target.offsetLeft + 'px'
        event.target.appendChild(circle)
        setTimeout(() => circle.remove(), 500)
    })
});
// const btn = document.querySelector('.btn')
// btn.addEventListener('click', (event) => {
//     const circle = document.createElement('span')
//     circle.classList.add('circle')
//     circle.style.top = event.pageY - btn.offsetTop + 'px'
//     circle.style.left = event.pageX - btn.offsetLeft + 'px'
//     btn.appendChild(circle)
//     setTimeout(() => circle.remove(), 500)
// })

